<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <!-- v-model 双向绑定 和value值有关  -->
    <div class="box">
        登录<input type="text" v-model="value">
        <!-- 复选框 -->
        <input type="checkbox" v-model="isch">同意协议

        <h1>兴趣爱好</h1>

        <input type="checkbox" name="" id="" v-model="isk" value="动漫">动漫
        <input type="checkbox" name="" id="" v-model="isk" value="小说">小说
        <input type="checkbox" name="" id="" v-model="isk" value="游戏">游戏
        <input type="checkbox" name="" id="" v-model="isk" value="音乐">音乐
        <h2>性别</h2>
        <input type="radio" name="" id="" v-model="isra" value="男">男
        <input type="radio" name="" id="" v-model="isra" value="女">女


        <input type="time" id="appt" name="appt" min="09:00" max="18:00" required v-model="date">
    </div>
    <script>
        const objs = {
            data() {
                return {
                    value: '',
                    // 复选框
                    isch: true,
                    // 多选框因为多个所以用数组
                    isk: [],
                    isra: '',
                    date: ''
                }

            }

        }
        let app = Vue.createApp(objs).mount('.box')
    </script>
</body>

</html>